<template>
  <div class="employee-index">
    <div class="employee-header">
      <div class="employee-search">
        <p>员工姓名：</p>
        <el-input v-model="pageParams.name" style="width: 200px; height: 36px;" placeholder="请输入员工姓名" prefix-icon="Search" />
        <el-button type="warning" round @click="pageQuery">查询</el-button>
      </div>
      <div class="employee-chart"><el-button type="success" plain @click="handleAddEmp"><el-icon>
            <Plus />
          </el-icon>添加员工</el-button></div>
    </div>
    <div class="employee-table">
      <el-table :data="records" stripe height="450" style="width: 100%">
        <el-table-column prop="name" label="员工姓名" width="180">
        </el-table-column>
        <el-table-column prop="username" label="账号" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="手机号">
        </el-table-column>
        <el-table-column prop="status" label="账号状态">
          <template v-slot="scope">
            {{ scope.row.status === 0 ? '禁用' : '启用' }}
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="最后操作时间">
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button link type="primary" @click="handleUpdateEmp(scope.row)">修改</el-button>
            <el-button link type="primary" :class="{ 'text-danger': scope.row.status === 1 }"
              @click="handleStartOrStop(scope.row)">{{ scope.row.status === 1 ? '禁用' :
                '启用' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pageList" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pageParams.page" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="pageParams.total">
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import { getEmployeePage, enableOrDisableEmployee } from '@/api/employee'
import { ref, onMounted } from 'vue'
// import { Search } from '@element-plus/icons-vue'
import router from '@/router';

// 分页参数
const pageParams = ref({
  name: '',// 员工姓名
  page: 1, // 当前页
  pageSize: 10, // 每页显示条数
  total: 0 // 总条数
})

const records = ref([])

const handleUpdateEmp = (row) => {
  console.log('修改员工:', row)
  if (row.username === 'admin') {
    ElMessage.error('admin为系统的管理员账号，不能修改！')
    return
  }
  router.push({
    path: '/employee/add',
    query: { id: row.id }
  });
}

const handleStartOrStop = (row) => {
  // console.log('变更账号状态:', row)
  if (row.username === 'admin') {
    ElMessage.error('admin为系统的管理员账号，不能修改！')
    return
  }
  // 确保status和id都有效
  if (row.status === undefined || row.id === undefined) {
    ElMessage.error('无效的账号状态或ID！')
    return
  }

  const newStatus = row.status === 1 ? 0 : 1; // 切换状态
  const actionMessage = newStatus === 0 ? '禁用' : '启用'; // 根据状态决定消息

  enableOrDisableEmployee({ id: row.id, status: newStatus }).then(res => {
    if (res.code === 1) {
      ElMessage.success(`账号${actionMessage}成功！`)
      pageQuery()
    } else {
      ElMessage.error(`账号${actionMessage}失败！`)
    }
  }).catch((err) => {
    console.log(err);
    ElMessage.error(`操作失败，请稍后再试！`)
  })
}


// 处理分页逻辑
const handleSizeChange = (newSize) => {
  pageParams.value.pageSize = newSize
  // console.log('pageSize:', newSize);
  pageParams.value.pageSize = newSize
  pageQuery()
}

// 处理当前页逻辑
const handleCurrentChange = (newPage) => {
  pageParams.value.page = newPage
  // console.log('currentPage:', newPage);
  pageParams.value.page = newPage
  pageQuery()
}

onMounted(async () => {
  pageQuery()
})

function pageQuery() {
  getEmployeePage(pageParams.value).then(res => {
    // console.log(res);
    pageParams.value.total = res.data.total
    records.value = res.data.records
  })
}

function handleAddEmp() {
  console.log('添加员工')
  // 处理添加员工的逻辑
  router.push('/employee/add');
}
</script>

<style lang="scss">
.employee-index {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .employee-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .employee-search {
      display: flex;
      align-items: center;

      p {
        margin-right: 10px;
        margin-left: 10px;
        font-size: 18px;
      }

      .el-input {
        margin-right: 10px;
      }

    }

    .employee-chart {

      margin-right: 20px;
      display: flex;
      align-items: center;
      justify-content: center;

      .el-icon {
        font-size: 16px;
        margin-bottom: 3px;
        padding-right: 3px;
      }
    }
  }

  .employee-table {
    // width: 100%;
    padding: 15px;

    .text-danger {
      color: red; // 设置文本颜色为红色
    }
  }

  .pageList {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>